<template>
	<view class="content">
		<!-- 气泡及登录授权 -->
		<view class="step-tips">
			<image class="background" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201201/45497960-3377-11eb-b6e4-377d47de737e.png"></image>
			<view class="front">
				<view class="coin-operate">
					<view class="coin">
						<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200910/2e767550-f306-11ea-bc7d-134589f3ede3.png"></image>
						<view class="balance">
							{{ parseInt(stepUserInfo.balance) || 0 }}
						</view>
					</view>
					<view class="btn-group">
						<button class="btn share" @tap="startShare()" v-if="!stepToken">
							<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201201/45ca6c60-337b-11eb-ace1-1bedf5a93e6b.png"></image>
							<text class="text">分享有礼</text>
						</button>
						<button class="btn share" open-type="share" hover-class="none" v-else>
							<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201201/45ca6c60-337b-11eb-ace1-1bedf5a93e6b.png"></image>
							<text class="text">分享有礼</text>
						</button>
						<button class="btn collection" @tap="toCollection">
							<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201201/58c28870-337b-11eb-bb69-094487c7d6a1.png"></image>
							<text class="text">收藏有礼</text>
						</button>
					</view>
				</view>
				<view class="rules" @tap="$refs.rulesPopup.open()">规则</view>
				<view class="login-step">
					<view class="unlogin" v-if="!stepToken">
						<button 
							open-type="getAuthorize" 
							@getAuthorize="onGetAuthorize" 
							scope="userInfo"
							class="authorize"
							hover-class="none">
						    点击登录
						</button>
					</view>
					<view class="step-amount" v-else>
						<view class="amount-list">
							<view class="amount-item"
								@tap="writeOffAmount(item, (index + 3))"
								v-if="index < 4"
								v-for="(item, index) in amountList">
									<view class="cicle">
										<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201201/b983fc30-337f-11eb-8f74-0d2628d7510a.png"></image>
										<text class="text">{{ item.goldAmount }}</text>
									</view>
							</view>
						</view>
						<view class="run-data">
							<view class="step-num" v-if="stepNum > 0">
								<count-up :num="stepNum" color="#ffffff" width="72" height="120" fontSize="120" fontWeight="600" v-if="stepNum > 0"></count-up>
								<view class="symbol">步</view>
							</view>
							<view class="step-num" v-if="stepNum === 0 && isGetRundata">
								<count-up :num="0" color="#ffffff" width="72" height="120" fontSize="120" fontWeight="600"></count-up>
								<view class="symbol">步</view>
							</view>
							<view class="get-step" v-if="stepNum === 0 && !isGetRundata" @tap="getRunData()">
								<text class="text">同步步数</text>
							</view>
						</view>
					</view>
				</view>
				<view class="gift-list">
					<view class="inner" :style="{ width: giftWidth + 'rpx' }" :class="[{ paused : giftList.length < 4 }, { animation : animation }]">
						<form @submit="submitMessage" report-submit="true" v-for="(item, index) in giftList">
							<button
									form-type="submit"
									hover-class="none"
									class="message-button">
								<view class="gift-item" @tap="writeOffGift(item, index)">
									<view class="gift-name">{{ item.name }}</view>
									<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201201/0f7f5750-3386-11eb-8888-f7ca90165715.png"></image>
								</view>
							</button>
						</form>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 步数抽奖、步数打卡 -->
		<view class="draw-sign">
			<view class="btn draw" @tap="toPath('/pages/draw/list')">
				<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201201/03511140-338a-11eb-94b4-3d58e89d4436.png"></image>
				<text class="text">步数抽奖</text>
			</view>
			<view class="btn sign" @tap="toPath('/pages/sign/index')">
				<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201201/2808f070-338a-11eb-89fa-abc9bf6f8b9a.png"></image>
				<text class="text">步数打卡</text>
			</view>
		</view>
		
		<!-- 金刚位 -->
		<view class="peter-banner" v-if="peterList.length > 0">
			<view class="peter-item" v-for="(item, index) in peterList" @tap="toMiniSoft(item.link, index, '金刚位', item.id)">
				<form @submit="submitMessage" report-submit="true">
					<button
					    form-type="submit"
					    hover-class="none"
					    class="message-button">
							<image class="image" :src="item.pick"></image>
							<text class="title">{{ item.title }}</text>
					</button>
				</form>
			</view>
			<!-- <view class="peter-item" @tap="toMiniSoft('/pages/limit/list')">
				<form @submit="submitMessage" report-submit="true">
					<button
					    form-type="submit"
					    hover-class="none"
					    class="message-button">
							<image class="image" :src="peterList[0].pick"></image>
							<text class="title">限时抢购测试入口</text>
					</button>
				</form>
			</view> -->
		</view>
		
		<!-- 关注生活号 -->
		<view class="life-compon" @tap="lifeClick()">
			<lifestyle publicId="2021001186663092" />
			
			<image class="red-page" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200925/4fc4cfe0-fedc-11ea-9757-9732b9597f49.png"></image>
		</view>
		
		<!-- 权益红包 -->
		<view class="interests-red">
			<text class="title">权益红包</text>
			<view class="red-list">
			    <view class="red-item" v-for="(item, index) in robMoneyDrawList" :key="item.id" @tap="writeOffRob(item, index)">
					<view class="symbol" v-if="Number(item.isRob === 1) && item.surplus > 0">¥<text class="text">{{ item.realMoney }}</text></view>
					<view class="symbol desc" v-else>随机红包</view>
					<view class="amount" v-if="Number(item.isRob) === 0">{{ item.surplus > 0 ? item.moneyFormat + '币抽' : '已抢完' }}</view>
					<view class="amount" v-else>已兑换</view>
				</view>
				<view class="red-item" v-for="(item, index) in robMoneyChangeList" :key="item.id" @tap="changeMoney(item, index)">
					<view class="symbol" v-if="Number(item.isRob) === 0">¥<text class="text">{{ item.value }}</text></view>
					<view class="symbol" v-else>¥<text class="text">{{ item.realMoney }}</text></view>
					<view class="amount" v-if="Number(item.isRob) === 0">{{ item.surplus > 0 ? item.moneyFormat + '币兑' : '已抢完' }}</view>
					<view class="amount" v-else>已兑换</view>
				</view>
			</view>
		</view>
		
		<view class="million-goods-nav">
			<text class="title">权益好物</text>
			<goods-tab ref="tab" :stickyTop="112" @tabChange="tabChangeCustom" :list="tabList"></goods-tab>
		</view>
		
		<!-- 百亿补贴 -->
        <view class="million-goods">
			<!-- 限时限量抢购 -->
			<view class="goods-limits" v-if="limitList.length > 0 && active === 0">
				<view class="limit-head" :style="{ backgroundImage: 'url(' + conf.marketBackgroundUrl + ')' }">
					<view class="market-title">{{ conf.marketTitle }}</view>
					<view class="show-more" @tap="limitMore">查看更多</view>
				</view>
				
				<million-item
				        v-for="(item, index) in limitList"
				        :millionItem="item"
				        :key="item.gid"
				        @onCopySuccess="onCopySuccess"
						type="limit"
				></million-item>
			</view>
            <view class="goods-list" @touchstart="touchStart" @touchend="touchEnd">
                <million-item
                        v-for="(item, index) in tabList[active].list"
                        :millionItem="item"
                        :index="index"
                        :tabIndex="active"
                        :key="item.gid"
                        @onCopySuccess="onCopySuccess"
                        @insBalance="$refs.balancePopup.open()"
                ></million-item>

                <!-- 商品骨架 -->
                <template v-for="i in ['a', 'b', 'c', 'd']">
                    <view class="skeleton-wrap" v-if="
					tabList[active].list.length === 0 &&
					!tabList[active].finished &&
					!tabList[active].empty">
                        <skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="4" avatarSize="254rpx"></skeleton>
                    </view>
                </template>
            </view>
        </view>
        <!-- 加载中插件 -->
        <view class="load-status">
            <load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
                       :contentText="contentText"></load-more>
            <load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
            <empty v-if="tabList[active].empty"></empty>
        </view>
		
		<!-- 回到顶部 -->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
			<text class="iconfont icon-huidaodingbu"></text>
		</view>
		
		<!-- 活动规则 -->
		<popup ref="rulesPopup" @touchmove.stop.prevent>
			<view class="rules-popup" @tap="$refs.rulesPopup.close()">
				<text class="iconfont icon-guanbi" @tap="$refs.rulesPopup.close()"></text>
				<view class="rules-title">
					<view class="text">规则</view>
					<view class="line"></view>
				</view>
				<view class="rules-content" @touchmove.stop.prevent>
					<text class="text" v-for="item in shareTemplate" :class="[{ bottom: item === '' }]">{{ item }}</text>
				</view>
			</view>
		</popup>
		
		<!-- 活动公告 -->
		<popup ref="noticePopup" @change="onNoticeChange" v-if="noticeInfo">
			<view class="notice-popup" @tap="$refs.noticePopup.close()">
				<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201221/4bb09570-435f-11eb-b14f-63ecf94e579c.png"></image>
				<view class="notice-content">
					<view class="text" v-for="item in noticeInfo.desc" :style="{ fontSize : item.fontSize + 'rpx', textAlign: item.textAlign, fontWeight: item.fontWeight, color: item.color, marginBottom: item.marginBottom + 'rpx'  }">{{ item.content }}</view>
					<view class="btn-group">
						<view class="btn" @tap="$refs.noticePopup.close()" v-if="noticeInfo && noticeInfo.goldAmount && Number(noticeInfo.goldAmount) > 0">领{{ noticeInfo.goldAmount }}权益币</view>
						<view class="btn" @tap="$refs.noticePopup.close()" v-else>我知道了</view>
					</view>
				</view>
				<text class="iconfont icon-guanbi" @tap="$refs.noticePopup.close()"></text>
			</view>
		</popup>
		
		<!-- 快捷登录 -->
		<authorize ref="authorize" @authorizeSuccess="refresh"></authorize>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import moment from '@/utils/packges/moment';
	import CountUp from '@/components/index/CountUp';
	import CountDown from "@/components/uni/CountDown";
	import Popup from '@/components/uni/Popup';
	import Skeleton from '@/components/uni/Skeleton';
	import LoadMore from "@/components/uni/LoadMore";
	import Authorize from '@/components/Authorize';
    import GoodsTab from '@/components/GoodsTab';
    import MillionItem from "@/components/MillionItem";
	import Empty from "@/components/Empty";
	import loader from '@/utils/mixin/loader';
	
	export default {
		name: 'index',
		mixins: [loader],
		components: {
			CountUp,
			CountDown,
			Popup,
			Skeleton,
			LoadMore,
			Authorize,
            GoodsTab,
            MillionItem,
			Empty
		},
		data() {
			return {
				stepNum: 0,
				amountList: [],
				animation: false,
				giftWidth: 750,
				giftList: [],
				stepToken: null,
				peterList: [],
				robMoneyDrawList: [],
				robMoneyChangeList: [],
				shareTemplate: null,
				// 浏览定时
				timing: 0,
				interval: null,
				activeGift: {},
				btnLock: false,
				marginLeft: 0,
				intervalLeft: null,
				isGetRundata: false,
				noticeInfo: null,
				limitList: []
			}
		},
		async onLoad(options) {
			// 小程序启动参数处理
			if (options.channel && options.channel) {
				if (uni.getStorageSync('app') !== options.channel) {
					uni.removeStorageSync('token');
					uni.removeStorageSync('stepToken');
				}
				
				uni.setStorageSync('app', options.channel);
			}
			// 获取风控配置
			this.$store.dispatch('getHdyxRiskSetting');
			
			this.initPage();

			// 获取百亿补贴用户信息
			if (!uni.getStorageSync('token')) {
				await this.$service.million.bwbtUser.getUserToken().then(async res => {
					await this.$store.commit('SET_TOKEN', res.token);
					await this.$store.dispatch('getUserInfo');

					if (Number(this.userInfo.subsidiesAmount) === 0) {
						this.$service.million.winners
								.getSubsidiesAmount({
									isBybt: true
								}).then(() => {
									this.$store.dispatch('getUserInfo');
								})
					}
                    // 获取百亿补贴商品分类
                    this.tabList = [];
                    this.$service.million.specialClassify
                        .list({
                            specialType: 100,
                            isBybt: true
                        })
                        .then(res => {
                            res.forEach(item => {
                                item.label = item.mainName;
                                item.loading = false;
                                item.finished = false;
                                item.error = false;
                                item.empty = false;
                                item.page = 1;
                                item.list = [];
                            });
                            this.tabList = this.tabList.concat(res);
                            // 获取百亿补贴列表
                            this.loadMore(this.tabList[this.active]);
							
							// 获取限时限量描述商品
							this.getLimitsGoods();
                        });
				});
			} else {
				await this.$store.dispatch('getUserInfo');

				if (Number(this.userInfo.subsidiesAmount) === 0) {
					this.$service.million.winners
							.getSubsidiesAmount({
								isBybt: true
							}).then(() => {
								this.$store.dispatch('getUserInfo');
							})
				}
                // 获取百亿补贴商品分类
                this.tabList = [];
                this.$service.million.specialClassify
                    .list({
                        specialType: 100,
                        isBybt: true
                    })
                    .then(res => {
                        res.forEach(item => {
                            item.label = item.mainName;
                            item.loading = false;
                            item.finished = false;
                            item.error = false;
                            item.empty = false;
                            item.page = 1;
                            item.list = [];
                        });
                        this.tabList = this.tabList.concat(res);
                        // 获取百亿补贴列表
                        this.loadMore(this.tabList[this.active]);
						
						// 获取限时限量描述商品
						this.getLimitsGoods();
                    });
			}
			
			uni.reportAnalytics('enter_zhuye', {
				enter_zhuye: 1
			});
		},
		onHide() {
			uni.reportAnalytics('bg_zhuye', {
				bg_zhuye: 1
			});
		},
		async onShow() {
			// 获取气泡列表
			this.getGiftList();
			
			this.$store.dispatch('addVisitRecordUnAuthorized', { pageType : 4 });
			
			if (uni.getStorageSync('stepToken')) {
				this.stepToken = uni.getStorageSync('stepToken');
				this.$store.dispatch('getStepUserInfo');
				// 获取待领取金币列表
				this.getAmountList();
				this.onGetRunData();
			} else {
				this.stepToken = null;
			}

			// 礼物核销校验
			if (this.timing > 0 && this.activeGift.timing >= 0) {
				if (this.timing >= this.activeGift.timing) {
					this.$service.task.bubble.clickBubble({
						id: this.activeGift.id
					}).then(res => {
						uni.showToast({
							title: '恭喜您完成任务，获得权益币奖励，请点击金币领取',
							icon: 'none'
						});
						// 刷新礼物列表
						this.getGiftList();

						// 获取待领取金币列表
						this.getAmountList();
					});
				} else {
					uni.showModal({
						content: '领取奖励失败，需浏览满' + this.activeGift.timing + '秒才算完成任务',
						showCancel: false,
						confirmText: '我知道了'
					});
				}
				this.timing = 0;
				clearInterval(this.interval);
			}
		},
		computed: {
			...mapGetters(['stepUserInfo', 'userInfo', 'hdyxRiskSetting', 'token', 'conf'])
		},
		methods: {
			initPage() {
				
				// 获取金刚位
				this.getPeterList();
				
				// 获取每日抢红包列表
				this.getRobMoneyList();
				
				// 获取首页活动规则
				this.$service.common.shareTemplate.list({
					type: 17
				}).then(res => {
					this.shareTemplate = res[0].split(' ');
				});
			},
			beforeLoader(item) {
				this.params.floorId = item.floorId;
				this.params.type = 3;
				this.params.isBybt = true;
                this.params.sort = 'desc';
                this.params.order = 'zfbLevel';
				this.service = this.$service.million.bwbtGoods.list(this.params);
				return true;
			},
			// 下拉刷新
			refresh() {
				// 获取待领取金币列表
				this.getAmountList();

				// 获取礼物列表
				this.getGiftList();
				
				// 获取每日抢红包列表
				this.getRobMoneyList();
				
				// 获取限时限量秒杀商品
				this.getLimitsGoods();
				
				if (uni.getStorageSync('stepToken')) {
					this.stepToken = uni.getStorageSync('stepToken');
					this.$store.dispatch('getStepUserInfo');
					this.onGetRunData();
				} else {
					this.stepToken = null;
				}
				
				setTimeout(() => {
					 uni.stopPullDownRefresh();
				}, 3000)
			},
			// 用户授权
			onGetAuthorize(res) {
				let that = this;
				
				// 获取会员基础信息
				my.getOpenUserInfo({
				    fail: (res) => {},
				    success: (res) => {
				        let userInfo = JSON.parse(res.response).response; // 以下方的报文格式解析两层 response
						
						// 获取token及用户信息
						uni.getAuthCode({
							scopes: 'auth_base',
							success: (codeRes) => {
								that.$service.common.step.auth({
								    authCode: codeRes.authCode,
									...userInfo
								}).then((authRes) => {
									that.stepToken = authRes.token;
									that.$store.dispatch('stepToken', { token: authRes.token }).then(() => {
										that.$store.dispatch('getStepUserInfo');
										// 获取步数授权
										that.onGetRunData();

										that.stepToken = authRes.token;

										that.getAmountList();

										that.getGiftList();

										that.getRobMoneyList();
									});
								})
							},
						})
				    },
				});

                uni.reportAnalytics('click_denglu', {
                    click_denglu: 1
                });
			},
			// 获取礼物列表
			getGiftList() {
				this.animation = false;
				this.$service.task.bubble.page().then(res => {
					// 安卓平台浏览时长固定八秒
					if (uni.getSystemInfoSync().platform === 'android') {
						res.list.forEach(item => {
							let httpsReg = RegExp(/https/);
							if (item.jumpUrl.match(httpsReg)) {
								item.timing = 0;
							} else {
								item.timing = 8;
							}
						})
					}
					this.giftList = [];
					// 数量大于3时顺序补充至20
					if (res.list.length > 3) {
						this.giftWidth = 4100;
						this.giftListRecursion(res.list);
						this.animation = true;
					} else {
						this.giftList = res.list;
						this.giftWidth = 750;
					}
				});
			},
			giftListRecursion(list) {
				list.forEach(item => {
					if (this.giftList.length >= 20) {
						return false;
					} else {
						this.giftList.push(item);
					}
				});
				if (this.giftList.length < 20) {
					this.giftListRecursion(list);
				}
			},
			// 获取金币列表
			getAmountList() {
				this.$service.task.userBubble.page().then(res => {
					this.amountList = res.list;
				});
			},
			// 浏览礼物任务
			writeOffGift(item, index) {
				let that = this;
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				if (item.type === 1) {
					uni.showLoading({
						title: '正在打开淘宝...'
					});
					let params = {
						itemId: item.jumpUrl,
						isTkl: 0
					}
					that.$service.task.taobao.privilege(params).then(res => {
						uni.hideLoading();
						my.navigateToMiniProgram({
							appId: '2018091261350219',
							path: `/pages/h5pages/h5pages?targetURI=${res.coupon_click_url}`
						});
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						})
					})
				} else {
					that.toMiniSoft(item.jumpUrl)
				}
				// 开启浏览定时
				this.timing = 0;
				clearInterval(this.interval);
				// 暂存当前礼物
				this.activeGift = item;
				this.interval = setInterval(() => {
					this.timing = this.timing + 1;
				}, 1000);

				uni.reportAnalytics('click_qipao' + (index + 1), {
					click_qipao: 1
				});

				uni.reportAnalytics('click_qipao', {
					click_qipao: 1
				});
			},
			// 核销金币
			writeOffAmount(item) {
				this.$service.task.userBubble.award({
					id: item.id
				}).then(() => {
					uni.showToast({
						title: '领取成功，' + item.goldAmount + '权益币已存入余额',
						icon: 'none'
					});
					// 刷新金币列表
					this.getAmountList();
					this.$store.dispatch('getStepUserInfo');
				});

				uni.reportAnalytics('click_jinbi', {
					click_jinbi: 1
				});
			},
			// 权益同步
			getRunData() {
				this.isGetRundata = true;
				this.onGetRunData();
				uni.reportAnalytics('click_tongbusj', {
					click_tongbusj: 1
				});
			},
			// 获取步数授权
			onGetRunData() {
				let that = this;
				let countDate = moment().format('YYYY-MM-DD');
				my.getRunData({
					countDate: countDate, // 查询步数日期
					timeZone: 'Asia/Shanghai', // 查询步数时区
					success: (res) => {
						that.$service.common.step.runData({
							crypted: res.response
						}).then(res => {
							this.stepNum = Number(res);
						})
					}
				});
				
				this.getNotice();
			},
			// 收藏有礼
			toCollection() {
				my.navigateToMiniProgram({
				    appId: '2018122562686742',
				    path: 'pages/index/index?originAppId=2021001190695285&newUserTemplate=KP20201030000002743814'
				});

				uni.reportAnalytics('click_shoucangyl', {
					click_shoucangyl: 1
				});
			},
			// 获取金刚位列表
			getPeterList() {
				this.$service.common.banner.page({
						size: 100,
						status: 'open',
						scenarioId: 5,
						order: 'level',
						sort: 'desc'
					}).then(res => {
					this.peterList = res.list;
				})
			},
			// 跳转至小程序
			toMiniSoft(jumpUrl, index, plat, id) {
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				let linkArr = jumpUrl.split(';');
				if (linkArr.length === 2) {
					my.navigateToMiniProgram({
						appId: linkArr[0],
						path: linkArr[1]
					});
				} else if (linkArr.length === 3) {
					my.navigateToMiniProgram({
						appId: linkArr[0],
						path: linkArr[1],
						extraData: JSON.parse(linkArr[2]),
					});
				} else {
					let httpsReg = RegExp(/http/);
					if (jumpUrl.match(httpsReg)) {
						let isAlipay = RegExp(/alipay/) 
						if (jumpUrl.match(isAlipay)) {
							my.ap.navigateToAlipayPage({
							    path: jumpUrl
							});
						} else {
							uni.navigateTo({
								url: '/pages/index/webView?url=' + jumpUrl
							})
						}
						// 安卓平台首次跳转多跳一次
						if (!uni.getStorageSync('isLife')) {
							if (!plat) {
								if (uni.getSystemInfoSync().platform === 'android') {
									let isAlipay = RegExp(/alipay/)
									if (jumpUrl.match(isAlipay)) {
										my.ap.navigateToAlipayPage({
										    path: jumpUrl
										});
									} else {
										uni.navigateTo({
											url: '/pages/index/webView?url=' + jumpUrl
										})
									}
									uni.setStorageSync('isLife', 'already');
								}
							}
						}
					} else {
						uni.navigateTo({
						    url: jumpUrl
						});
					}
				}

				if (plat === '金刚位') {
					this.$service.common.step.clickStatistics({
						targetId: id,
						type: 1
					});
					if (index) {
						uni.reportAnalytics('click_jinggang' + (index + 1), {
							click_jinggang: 1
						});
					}
				}
				if (plat === '5G权益') {
					this.$service.common.step.clickStatistics({
						targetId: id,
						type: 2
					});
					if (index) {
						uni.reportAnalytics('click_5gqy' + (index + 1), {
							click_5gqy: 1
						});
					}
				}
			},
			// 获取权益红包列表
			getRobMoneyList() {
				this.$service.task.robMoney.list({
					order: 'level',
					sort: 'desc',
				}).then(res => {
					res.forEach(item => {
						let value = Number(item.money);
						if (value >= 10000) {
							item.moneyFormat = (value / 10000) + 'w';
						} else {
							item.moneyFormat = item.money;
						}
					});
					
					this.robMoneyDrawList = res;
				});
				
				this.$service.task.robMoney.list({
					type: 2,
					order: 'level',
					sort: 'desc'
				}).then(res => {
					res.forEach(item => {
						let value = Number(item.money);
						if (value >= 10000) {
							item.moneyFormat = (value / 10000) + 'w';
						} else {
							item.moneyFormat = item.money;
						}
					})
					
					this.robMoneyChangeList = res;
				})
			},
			// 随机红包抽奖
			writeOffRob(item, index) {
				let that = this;
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				if (Number(item.isRob) === 1) {
					return false;
				}
				if (item.surplus === 0) {
					return false;
				}
				if (!this.btnLock) {
					if (this.stepUserInfo.balance > item.money) {
						this.btnLock = true;
						uni.showModal({
							title: '抽奖确认',
							content: '您确定用'+ item.money +'权益币抽取拼手气红包吗？',
							success: function(res) {
								if (res.confirm) {
									that.$service.task.robMoney.rob({
										id: item.id
									}).then(res => {
										uni.showToast({
											title: '恭喜你抢到 '+ res.money + '元现金红包，已存入余额',
											icon: 'none'
										});
										that.getRobMoneyList();
										that.$store.dispatch('getStepUserInfo');
					
										that.btnLock = false;
									}).catch(err => {
										uni.showToast({
											title: err.message,
											icon: 'none'
										});
										that.btnLock = false;
									})
					
									uni.reportAnalytics('click_hongbao_tcqr', {
										click_hongbao_tcqr: 1
									});
								} else {
									uni.reportAnalytics('click_hongbao_tckl', {
										click_hongbao_tckl: 1
									});
									that.btnLock = false;
								}
							}
						});
					} else {
						uni.showToast({
							title: '您的权益币不足',
							icon: 'none'
						})
					}
					
					uni.reportAnalytics('click_hongbao' + (index + 1), {
						click_hongbao: 1
					});
				}
			},
			changeMoney(item, index) {
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				let that = this;
				if (item.isRob === 1) {
					return false;
				}
				if (item.surplus === 0) {
					uni.showToast({
						title: '已抢完~',
						icon: 'none'
					});
					return false;
				}
				if (this.stepUserInfo.balance < item.money) {
					uni.showToast({
						title: '您的权益币不足',
						icon: 'none'
					});
					return false;
				}
				if (!this.btnLock) {
					this.btnLock = true;
					uni.showModal({
						title: '兑换确认',
						content: '您确定用'+ item.money +'权益币换' + item.value + '元现金红包吗？',
						success: function(res) {
							if (res.confirm) {
								that.$service.task.robMoney.rob({
									id: item.id
								}).then(res => {
									uni.showToast({
										title: '兑换' + item.value + '红包成功，在兑换记录查看提现进度',
										icon: 'none'
									});
									that.getRobMoneyList();
									that.$store.dispatch('getStepUserInfo');
									that.btnLock = false;
								}).catch(err => {
									uni.showToast({
										title: err.message,
										icon: 'none'
									});
									that.btnLock = false;
								})

								uni.reportAnalytics('click_duihongbao_tcqr', {
									click_duihongbao_tcqr: 1
								});
							} else {
								that.btnLock = false;
								uni.reportAnalytics('click_duihongbao_tckl', {
									click_duihongbao_tckl: 1
								});
							}
						}
					});
				}
				uni.reportAnalytics('click_duihongbao' + (index + 1), {
					click_duihongbao: 1
				});
			},
			// 静默提交消息推送
			submitMessage(e) {
				let vm = this;
				uni.getAuthCode({
					scopes: 'auth_base', // 主动授权（弹框）：auth_user，静默授权（不弹框）：auth_base
					success: (codeRes) => {
						if (codeRes.authCode) {
							vm.$service.common.alipayXcx
								.save({
									formId: e.detail.formId,
									authCode: codeRes.authCode
								})
						}
					}
				})
			},
			startShare() {
				this.$refs.authorize.open();
				uni.reportAnalytics('click_yaoqingyl', {
					click_yaoqingyl: 1
				});
			},
			// 点击关注生活号
			lifeClick() {
				uni.reportAnalytics('click_guangzhushh', {
					click_guangzhushh: 1
				});
			},
			onCopySuccess(tkl, refresh) {
				my.navigateToMiniProgram({
					appId: '2018091261350219',
					path: `/pages/h5pages/h5pages?targetURI=${tkl}`
				});
                if (refresh) {
                    setTimeout(() => {
                        this.onRefresh(this.tabList[this.active]);
						this.limitList = [];
						this.getLimitsGoods();
                    }, 2000)
                }
			},
            tabChangeCustom(index) {
                this.tabChange(index, 830);
				this.$store.dispatch('addVisitRecordUnAuthorized', { pageType : 5, floorId : this.tabList[index].floorId });
                if (index <= 4) {
                    my.reportAnalytics('click_fenlei' + (index + 1), {
                        desc: '点击第' + this.toChineseNum(index + 1) + '个商品类目'
                    });
                }
            },
            touchStart(e) {
                this.startCoor = e.touches[0].pageX;
            },
            touchEnd(e) {
                if (this.startCoor > e.changedTouches[0].pageX) {
                    if ((this.startCoor - e.changedTouches[0].pageX) > 150) {
                        if (this.active === (this.tabList.length - 1)) {
                            this.$refs.tab.tabChange(0);
                        } else {
                            this.$refs.tab.tabChange(this.active + 1)
                        }
                    }
                } else {
                    if ((e.changedTouches[0].pageX - this.startCoor) > 150) {
                        if (this.active === 0) {
                            this.$refs.tab.tabChange(this.tabList.length - 1);
                        } else {
                            this.$refs.tab.tabChange(this.active - 1);
                        }
                    }
                }
            },
			toPath(url) {
				uni.navigateTo({
					url: url
				});
				if (url === '/pages/draw/list') {
					uni.reportAnalytics('click_bushucj', {
						click_bushucj: 1
					});
				}
				if (url === '/pages/sign/index') {
					uni.reportAnalytics('click_bushudk', {
						click_bushudk: 1
					});
				}
			},
			getNotice() {
				this.$service.activity.announcement.display().then(res => {
					if (res.desc) {
						res.desc = JSON.parse(res.desc.replace(/[ ]/g,"").replace(/[\r\n]/g,""));
						this.noticeInfo = res;
						
						setTimeout(() => {
							this.$refs.noticePopup.open()
						}, 1000)
					}
				});
			},
			onNoticeChange(obj) {
				if (!obj.show) {
					if (this.noticeInfo.goldAmount > 0) {
						this.$service.activity.announcement.award({
							announcementId: this.noticeInfo.id
						}).then(res => {
							uni.showToast({
								title: '恭喜你获得' + this.noticeInfo.goldAmount + '权益币',
								icon: 'none'
							});
							this.$store.dispatch('getStepUserInfo');
						})
					}
				}
			},
			getLimitsGoods() {
				this.$service.million.bwbtGoods.marketGoods({
					page: 1,
					size: 3,
					isBybt: true
				}).then(res => {
					this.limitList = res.list;
				})
			},
			limitMore() {
				uni.navigateTo({
					url: '/pages/limit/index'
				})
			}
		},
		onPullDownRefresh() {
		    this.refresh();
		},
		onShareAppMessage() {
			uni.reportAnalytics('click_yaoqingyl', {
				click_yaoqingyl: 1
			});
			const { shareFriendMainTemplate, shareFriendMainSubtitleTemplate, shareImageUrl } = this.conf;
			
			return {
				title: shareFriendMainTemplate,
				content: shareFriendMainSubtitleTemplate,
				desc: shareFriendMainSubtitleTemplate,
				path: '/pages/index/index',
				bgImgUrl: shareImageUrl,
				success: () => {
					this.$service.common.step.shareAward().then(res => {
						setTimeout(() => {
							uni.showToast({
								title: '恭喜你分享成功，获得' + res.shareDeservedGoldAmount + '权益币奖励',
								icon: 'none'
							});
						}, 2000)

						this.$store.dispatch('getStepUserInfo');
					})
				}
			};
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		overflow-x: hidden;
		.step-tips {
			position: relative;
			width: 100%;
			height: 714rpx;
			background: #EFF0F1;
			.background {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.front {
				height: 714rpx;
				position: relative;
				padding-top: 10rpx;
				.coin-operate {
					padding: 0 0 0 22rpx;
					@include flexBox(space-between, center);
					.coin {
						height: 56rpx;
						position: relative;
						.image {
							width: 56rpx;
							height: 56rpx;
							z-index: 10;
							position: absolute;
							top: 0rpx;
							left: 0rpx;
						}
						.balance {
							z-index: 9;
							line-height: 44rpx;
							background: #fff;
							border: 4rpx solid #FFE30E;
							border-radius: 0 50rpx 50rpx 0;
							padding: 0 22rpx 0 20rpx;
							position: absolute;
							top: 2rpx;
							left: 40rpx;
							color: #FACC2B;
						}
					}
					.btn-group {
						@include flexBox(flex-end, center)
						.btn {
							width: 164rpx;
							height: 52rpx;
							border: none;
							padding: 0;
							margin-left: 14rpx;
							border-radius: 12rpx;
							background: linear-gradient(180deg, #ACD9F9 0%, #FFFFFF 100%);
							@include flexBox(center, center)
							&::after {
								border: none;
							}
							.text {
								color: #333333;
								font-size: 24rpx;
							}
							.image {
								width: 28rpx;
								height: 28rpx;
								margin-right: 6rpx;
							}
						}
					}
				}
				.rules {
					width: 34rpx;
					height: 108rpx;
					background: #4797CE;
					border-radius: 0 8rpx 8rpx 0;
					color: #fff;
					font-size: 24rpx;
					opacity: 0.8;
					position: absolute;
					left: 0;
					top: 128rpx;
					@include flexBox(center, center);
				}
				.login-step {
					@include flexBox(center, center, column);
					.unlogin {
						width: 296rpx;
						height: 296rpx;
						border-radius: 50%;
						position: absolute;
						right: 96rpx;
						top: 176rpx;
						background: linear-gradient(180deg, rgba(255, 255, 255, 0.39) 0%, rgba(255, 255, 255, 0) 100%);
						@include flexBox(center, center, column);
						.authorize {
							font-size: 72rpx;
							height: 200rpx;
							line-height: 200rpx;
							background: none;
							border: none;
							color: #fff;
							padding: 0;
							text-shadow: 0px 2px 3px rgba(118, 189, 223, 0.86);
							&::after {
								border: none;
							}
						}
					}
					.step-amount {
						position: absolute;
						right: 0;
						bottom: 280rpx;
						.amount-list {
							width: 430rpx;
							margin-bottom: 40rpx;
							@include flexBox(flex-start, center);
							.amount-item {
								margin-right: 20rpx;
								animation-timing-function: linear;
								animation: bubble_animation1 4s infinite;
								&:nth-child(2n) {
									margin-top: -160rpx;
									animation: bubble_animation2 4s infinite;
								}
								.cicle {
									width: 88rpx;
									height: 88rpx;
									line-height: 84rpx;
									position: relative;
									@include flexBox(center, center)
									.image {
										width: 100%;
										height: 100%;
										position: absolute;
										left: 0;
									}
									.text {
										color: #fff;
										font-size: 34rpx;
										position: relative;
									}
								}
							}
						}
						.run-data {
							width: 430rpx;
							@include flexBox(center);
							.step-num {
								opacity: 0.8;
								@include flexBox(center, flex-end);
								.symbol {
									width: 46rpx;
									height: 46rpx;
									background: #fff;
									color: #6AB6F1;
									font-size: 28rpx;
									border-radius: 50rpx;
									text-align: center;
									line-height: 46rpx;
									margin-left: 8rpx;
									margin-bottom: 10rpx;
								}
							}
							.get-step {
								width: 348rpx;
								height: 110rpx;
								box-sizing: border-box;
								background: rgba(255, 255, 255, 0.41);
								border: 4px solid #7EBCFF;
								border-radius: 100rpx;
								font-weight: 600;
								@include flexBox(center, center);
								.text {
									font-size: 68rpx;
									color: #fff;
									text-shadow: 0px 2px 3px rgba(129, 175, 212, 0.92);
								}
							}
						}
					}
				}
				.gift-list {
					width: 100%;
					height: 250rpx;
					position: absolute;
					bottom: -10rpx;
					// overflow-x: auto;
					overflow: hidden;
					padding-top: 10rpx;
					box-sizing: border-box;
					background: url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201218/c2186a70-40f4-11eb-9b48-4ba90cf4c69f.png') no-repeat center bottom;
					background-size: 750rpx 150rpx;
					&::-webkit-scrollbar {
						width: 0;
						height: 0;
						display: none;
						color: transparent;
					}
					&:active {
						.inner {
							animation-play-state: paused;
						}
					}
					.inner {
						height: 188rpx;
						min-width: 750rpx;
						width: fit-content;
						background: url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201217/447fcbe0-401c-11eb-906f-43e672d8c8f4.jpg') no-repeat left bottom;
						background-size: 750rpx 82rpx;
						background-repeat: repeat-x;
						transition: 0.5s;
						@include flexBox(flex-start, flex-start, row, nowrap);
						&.paused {
							animation-play-state: paused;
						}
						&.animation {
							animation: move 100s linear infinite;
						}
						.gift-bg {
							width: 100%;
							height: 150rpx;
							position: absolute;
							bottom: 0;
							z-index: 1;
						}
						.message-button {
							width: 204rpx;
							height: 184rpx;
						}
						.gift-item {
							width: 183rpx;
							height: 184rpx;
							margin-left: 22rpx;
							position: relative;
							z-index: 100;
							@include flexBox(center, center, column);
							.gift-name {
								width: 183rpx;
								height: 56rpx;
								background: url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201201/53854810-3386-11eb-9472-856d9648a1ce.png') no-repeat center center;
								background-size: 100% 100%;
								color: #FF4744;
								font-size: 22rpx;
								line-height: 44rpx;
								text-align: center;
								padding: 0 4rpx;
								box-sizing: border-box;
								@include ellipsis(1);
							}
							.image {
								width: 122rpx;
								height: 148rpx;
								margin-top: -10px;
								animation-timing-function: linear;
								animation: exchange_scale 4s infinite;
							}
						}
					}
				}
			}
		}
		.demo-list {
			width: 100%;
			height: 150rpx;
			background: #ccc;
			overflow:auto;
			&:active {
				.inner {
					animation-play-state:paused;
				}
			}
			.inner {
				width: 3200rpx;
				height: 50rpx;
				animation:move 16s linear infinite;
				.item {
					width: 200rpx;
					height: 150rpx;
					background: #000;
					color: #fff;
					float:left;
					text-align: center;
				}
			}
		}
		@keyframes move {
			0%
			{
				transform: translateX(0px);
			}
			100%
			{
				transform: translateX(-3350rpx);
			}
		}
		.draw-sign {
			width: 708rpx;
			border-radius: 16rpx;
			margin: 20rpx auto;
			box-sizing: border-box;
			padding: 24rpx;
			background: #fff;
			@include flexBox(space-between)
			.btn {
				width: 316rpx;
				height: 140rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
				@include flexBox(flex-start, center);
				.text {
					color: #808080;
					font-size: 37rpx;
				}
				&.draw {
					background: #FFF9F9;
					border: 2rpx solid #FFBCBB;
					.image {
						width: 136rpx;
						height: 124rpx;
					}
				}
				&.sign {
					background: #FEFAF3;
					border: 2rpx solid #FFE3B2;
					.image {
						width: 116rpx;
						height: 116rpx;
					}
				}
			}
		}
		.peter-banner {
			background: #fff;
			width: 708rpx;
			margin: 20rpx auto;
			padding: 28rpx 20rpx 0;
			box-sizing: border-box;
			border-radius: 16rpx;
			@include flexBox(flex-start, null, null, wrap);
			.peter-item {
				width: 130rpx;
				margin-bottom: 28rpx;
				margin-right: 4rpx;
				&:nth-child(5n) {
					margin-right: 0rpx;
				}
				.message-button {
					width: 130rpx;
					height: 152rpx;
					@include flexBox(center, center, column);
					.image {
						width: 92rpx;
						height: 92rpx;
						border-radius: 16rpx;
						margin-bottom: 20rpx;
					}
					.title {
						font-size: 24rpx;
						line-height: 40rpx;
					}
				}
			}
		}
		.life-compon {
			width: 708rpx;
			height: 110rpx;
			background: #fff;
			border-radius: 16rpx;
			margin: 0 auto 20rpx;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
			.red-page {
				width: 38rpx;
				height: 42rpx;
				position: absolute;
				right: 16rpx;
				top: 0;
				z-index: 100;
				animation: red_page 1.4s infinite;
				animation-timing-function: linear;
			}
		}
		.red-pack {
			width: 708rpx;
			height: 380rpx;
			margin: 0 auto;
			background: #fff;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			border-radius: 18rpx;
			.top-nav {
				font-size: 30rpx;
				margin-bottom: 30rpx;
				@include flexBox(space-between, flex-start);
				.left {
					@include flexBox(null, null, column);
					.title {
						font-size: 37rpx;
						color: #333;
						font-weight: 600;
					}
					.text {
						font-size: 24rpx;
						color: #666666;
					}
				}
				.right {
					width: 310rpx;
					height: 50rpx;
					padding: 0 20rpx;
					background: #E8F2FF;
					border-radius: 50rpx;
					@include flexBox(center);
					.image {
						width: 32rpx;
						height: 28rpx;
					}
					.swiper {
						flex: 1;
						height: 50rpx;
						.swiper-item {
							width: 100%;
							height: 50rpx;
							line-height: 50rpx;
							font-size: 24rpx;
							text-align: right;
							font-weight: 300;
							box-sizing: border-box;
							@include flexBox(center, center);
							.text {
								flex: 1;
								margin-left: 2rpx;
								color: #1677FA;
								@include ellipsis(1);
							}
						}
					}
				}
			}
			.pack-list {
				@include flexBox(flex-start);
				.pack-item {
					@include flexBox(center, center, column);
					width: 193rpx;
					height: 220rpx;
					position: relative;
					margin: 0 14rpx;
					.image {
						position: absolute;
						width: 100%;
						height: 100%;
					}
					.limit {
						position: absolute;
						right: -20rpx;
						top: -16rpx;
						font-size: 20rpx;
						background: #FF9421;
						border: 2rpx solid #FFE1B4;
						border-radius: 50rpx 50rpx 50rpx 0;
						color: #FFEEBE;
						padding: 0 6rpx;
					}
					.front {
						position: relative;
						font-size: 24rpx;
						color: #FFE18C;
						@include flexBox(center, center, column);
						.money {
							margin-bottom: 80rpx;
							margin-top: 40rpx;
						}
						.text {
							color: #FF1C41;
							margin-bottom: 90rpx;
							.red {
								font-size: 42rpx;
								color: #FF1C41;
							}
						}
					}
				}
			}
		}
		.interests-red {
			width: 708rpx;
			background: #fff;
			box-sizing: border-box;
			padding: 24rpx;
			margin: 20rpx auto;
			border-radius: 16rpx;
			.title {
				color: #333333;
				font-size: 37rpx;
			}
			.red-list {
				width: 100%;
				margin-top: 24rpx;
				overflow-x: auto;
				white-space: nowrap;
				overflow-y: hidden;
				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					display:none;
					color: transparent;
				}
				.red-item {
					width: 190rpx;
					height: 214rpx;
					margin-right: 24rpx;
					display: inline-block;
					background: url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201201/906adf90-339c-11eb-8888-f7ca90165715.png') no-repeat center center;
					background-size: 100% 100%;
					position: relative;
					.symbol {
						position: absolute;
						width: 100%;
						top: 24rpx;
						font-size: 32rpx;
						color: #FF1C41;
						@include flexBox(center, flex-end);
						.text {
							font-size: 52rpx;
							line-height: 56rpx;
						}
					}
					.desc {
						margin-top: 10rpx;
					}
					.amount {
						width: 100%;
						text-align: center;
						color: #FF1C41;
						font-size: 26rpx;
						position: absolute;
						bottom: 34rpx;
					}
				}
			}
		}
		.message-button {
			background: none;
			padding: 0;
			border: none;
			&::after {
				border: none;
			}
		}
		.million-goods-nav {
			width: 708rpx;
			background: #fff;
			box-sizing: border-box;
			padding: 24rpx 10rpx;
			margin: 20rpx auto;
			border-radius: 16rpx;
			.title {
				color: #333333;
				font-size: 37rpx;
				padding: 0 10rpx;
			}
		}
        .million-goods {
			.goods-limits {
				width: 704rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				background: #fff;
				border-radius: 16rpx;
				overflow: hidden;
				.limit-head {
					height: 94rpx;
					background-size: 100%;
					padding: 0 20rpx;
					@include flexBox(space-between, center);
					.market-title {
						color: #171717;
						font-size: 32rpx;
					}
					.show-more {
						font-size: 24rpx;
						color: #FE3216;
						border: 2rpx solid #FE3216;
						padding: 4rpx 18rpx;
						border-radius: 50rpx;
						&:active {
							background: #fff;
						}
					}
				}
			}
            .skeleton-wrap {
                background: #fff;
                width: 704rpx;
                margin: 0 auto;
                margin-top: 20rpx;
                border-radius: 16rpx;
            }
        }
	}
	.rules-popup {
		width: 550rpx;
		background: #fff;
		padding: 40rpx 30rpx;
		border-radius: 16rpx;
		position: relative;
		font-size: 24rpx;
		min-height: 300rpx;
		background: linear-gradient(180deg, #F3F9FF 0%, #FFFFFF 100%);
		.icon-guanbi {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			color: #000;
			font-size: 34rpx;
		}
		.rules-title {
			color: #333333;
			font-size: 36rpx;
			text-align: center;
			font-weight: 600;
			margin-bottom: 20rpx;
			.line {
				background: #439DFF;
				width: 92rpx;
				height: 14rpx;
				border-radius: 50rpx;
				margin: -14rpx auto 0;
			}
		}
		.rules-content {
			font-size: 26rpx;
			max-height: 600rpx;
			overflow: auto;
			@include flexBox(null, null ,column);
			.bottom {
				margin-bottom: 16rpx;
			}
		}
	}
	.notice-popup {
		margin-top: -150rpx;
		width: 606rpx;
		@include flexBox(flex-start, center, column)
		.image {
			width: 606rpx;
			height: 312rpx;
			z-index: 100;
		}
		.notice-content {
			background: #fff;
			padding: 60rpx 52rpx;
			width: 606rpx;
			box-sizing: border-box;
			margin-top: -60rpx;
			border-radius: 16rpx;
			margin-bottom: 44rpx;
			max-height: 600rpx;
			overflow: auto;
			.text {
				white-space: pre-line;
			}
			.btn-group {
				margin-top: 60rpx;
				@include flexBox(center);
				.btn {
					width: 236rpx;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					font-size: 30rpx;
					border-radius: 16rpx;
					background: linear-gradient(307deg, #41A7FF 0%, #67B9FF 100%);
				}
			}
		}
		.icon-guanbi {
			color: #fff;
			border-radius: 50rpx;
			padding: 4rpx;
			font-size: 40rpx;
			border: 2rpx solid #fff;
			width: 62rpx;
			height: 62rpx;
			box-sizing: border-box;
			@include flexBox(center, center);
		}
	}
	@keyframes bubble_animation1 {
		0% {
	        transform: translateY(0rpx);
	    }
		50% {
			transform: translateY(-10rpx);
		}
	    100% {
	        transform: translateY(0rpx);
	    }
	}
	@keyframes bubble_animation2 {
		0% {
	        transform: translateY(-10rpx);
	    }
		50% {
			transform: translateY(0rpx);
		}
	    100% {
	        transform: translateY(-10rpx);
	    }
	}
	@keyframes exchange_scale {
		0% {
			transform: scale(1);
		}
		
		30% {
			transform: scale(0.9);
		}
		
		50% {
			transform: scale(1.05);
		}
		
		80% {
			transform: scale(1);
		}
	}
	@keyframes red_page {
		0% {
		    transform: rotate(0);
		}
		
		50% {
		    transform: rotate(-40deg);
		}
		
		100% {
		    transform: rotate(0);
		}
	}
	.draw-info {
		width: 708rpx;
		margin: 22rpx auto;
		padding: 16rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: #fff;
		position: relative;
		.img-box {
		    width: 676rpx;
		    height: 300rpx;
		    border-radius: 8rpx;
		    overflow: hidden;
		    @include flexBox(center, center);
		    .image {
		        width: 676rpx;
		    }
		}
	}
</style>
